<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>至尊宝 ROI 计算器</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f8f8f8;
            margin: 0;
        }

        .container {
            display: flex;
            background: #fff;
            padding: 20px 20px 28px 40px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .title {
            margin-bottom: 10px;
            text-align: center;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type='number'] {
            -moz-appearance: textfield;
        }

        .calculator {
            width: 350px;
            margin-right: 20px;
        }

        .input-group {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .input-group label {
            width: 150px;
            text-align: left;
            margin-right: 10px;
        }

        .input-group input {
            flex: 1;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .calculator button {
            width: 100%;
            padding: 10px;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .roi-button {
            background: #007bff;
        }

        .roi-button:hover {
            background: #0056b3;
        }

        .profit-button {
            background: #28a745;
        }

        .profit-button:hover {
            background: #218838;
        }

        .result {
            margin-top: 10px;
            padding: 10px;
            text-align: center;
            font-weight: bold;
            border-radius: 4px;
            display: block;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }

        .result-roi {
            border: 2px solid #007bff;
            color: #007bff;
            margin-bottom: 20px;
        }

        .result-profit {
            border: 2px solid #28a745;
            color: #28a745;
        }

        .image {
            width: 450px;
        }

        .image img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="calculator">
        <h2 class="title">至尊宝 ROI 计算器</h2>
        <div class="input-group">
            <label>销售价格：</label>
            <input id="price" type="number" maxlength="20"/>
        </div>
        <div class="input-group">
            <label>产品成本：</label>
            <input id="cost" type="number" maxlength="20"/>
        </div>
        <div class="input-group">
            <label>服务费扣点（%）：</label>
            <input id="serviceFee" type="number" maxlength="20"/>
        </div>
        <div class="input-group">
            <label>平均运费：</label>
            <input id="operation" type="number" maxlength="20"/>
        </div>
        <div class="input-group">
            <label>赠品成本：</label>
            <input id="giftCost" type="number" maxlength="20"/>
        </div>
        <div class="input-group">
            <label>退款率（%）：</label>
            <input id="returnRate" type="number" maxlength="20"/>
        </div>
        <div class="input-group">
            <label>其他成本：</label>
            <input id="otherCost" type="number" maxlength="20"/>
        </div>
        <button class="roi-button" onclick="calculateROI()">计算ROI</button>
        <div class="result result-roi" id="resultROI">保本ROI：</div>

        <div class="input-group">
            <label>实际花费广告费用：</label>
            <input id="adCost" type="number" maxlength="20"/>
        </div>
        <div class="input-group">
            <label>实际投产ROI：</label>
            <input id="realROI" type="number" maxlength="20"/>
        </div>
        <div class="input-group">
            <label>保本ROI：</label>
            <input id="breakevenROI" type="number" maxlength="20"/>
        </div>
        <button class="profit-button" onclick="calculateProfit()">计算推广盈亏</button>
        <div class="result result-profit" id="resultProfit">推广盈亏：</div>
    </div>
    <div class="image">
        <img src="/ad.png" alt="右侧图片"/>
    </div>
</div>

<script setup lang="ts">
    function toFixedAccurate(num, precision) {
        const factor = Math.pow(10, precision);
        return Math.round(num * factor) / factor;
    }

    function calculateROI() {
        const price = parseFloat(document.getElementById('price').value);
        const cost = parseFloat(document.getElementById('cost').value);
        const serviceFee = parseFloat(document.getElementById('serviceFee').value);
        const operation = parseFloat(document.getElementById('operation').value);
        const giftCost = parseFloat(document.getElementById('giftCost').value);
        const returnRate = parseFloat(document.getElementById('returnRate').value);
        const otherCost = parseFloat(document.getElementById('otherCost').value);


        console.log('销售价格:', price, '产品成本:', cost, '服务费扣点:', serviceFee, '平均运费:', operation, '赠品成本:', giftCost, '退款率:', returnRate, '其他成本:', otherCost)
        const resultElement = document.getElementById('resultROI');
        if (isNaN(price) || isNaN(cost) || isNaN(serviceFee) || isNaN(operation) || isNaN(giftCost) || isNaN(returnRate) || isNaN(otherCost)) {
            resultElement.textContent = '请输入有效的数字！';
            return
        }
        if (price - cost <= 0) {
            resultElement.textContent = '计算无效，利润为零或负数。';
            return
        }

        const netProfit = price - cost - price * (serviceFee / 100) - operation - giftCost - otherCost;
        const roi = netProfit - netProfit * (returnRate / 100);
        const realROI = roi !== 0 ? toFixedAccurate(price / roi, 2) : Infinity;


        resultElement.textContent = realROI === Infinity ? '保本ROI：∞' : `保本ROI：${realROI}`;
    }

    function calculateProfit() {
        const adCost = parseFloat(document.getElementById('adCost').value);
        const realROI = parseFloat(document.getElementById('realROI').value);

        const breakevenROI = parseFloat(document.getElementById('breakevenROI').value);
        console.log('实际花费广告费用:', adCost, '实际投产ROI:', realROI, '保本ROI:', breakevenROI)
        const resultElement = document.getElementById('resultProfit');
        if (isNaN(adCost) || isNaN(realROI) || isNaN(breakevenROI)) {
            resultElement.textContent = '请输入有效的数字！';
            return
        }

        const profit = breakevenROI !== Infinity ? toFixedAccurate(adCost * realROI - adCost * breakevenROI, 2) : NaN;


        resultElement.textContent = isNaN(profit) ? '推广盈亏：无效' : `推广盈亏：${profit}`;
    }
</script>
</body>
</html>
